<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="commons/css::css">head</th:block>
</head>

<body class="flat-blue">
<i style="display: none;" id="_manager_url" url="/star/manager"></i>
<div class="app-container">
    <div class="row content-container">
        <th:block th:include="commons/nav_head::nav">head</th:block>
        <th:block th:include="commons/side::side">side</th:block>
        <!-- Main Content -->
        <div class="container-fluid">
            <div class="side-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <label th:text="${star.id}?'修改':'添加'"></label>明星款
                            </div>
                            <div class="panel-body form-group">
                                <form class="form-horizontal" enctype="multipart/form-data" role="form" id="actionForm"
                                      name="actionForm" method="post" th:action="@{/star/saveStar}">
                                    <div class="form-group">
                                        <label for="title" class="col-sm-2 control-label">主标题</label>
                                        <div class="col-sm-4">
                                            <input type="hidden" id="id" name="id" th:value="${star.id}">
                                            <input type="text" id="title" name="title" required th:value="${star.title}"
                                                   class="form-control">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="mainImgUrl" class="col-sm-2 control-label">主图</label>
                                        <div class="col-sm-4">
                                            <input type="hidden" id="mainImgUrl" name="mainImgUrl"
                                                   th:value="${star.mainImgUrl}">
                                            <input type="file" style="display: none;" id="mainImgUrlFile" img
                                                   name="mainImgUrlFile">
                                            <img name="nail-img" th:src="${star.mainImgUrl}?${star.mainImgUrl}:@{/public/images/plus23.png}"
                                                 style="height: 150px; width: 150px;">
                                            <label style="color: red; margin-left: 10px">(图片尺寸建议为220*550)</label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="subTitle" class="col-sm-2 control-label">副标题</label>
                                        <div class="col-sm-4">
                                            <input type="text" id="subTitle" name="subTitle" required
                                                   th:value="${star.subTitle}" class="form-control">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="subImgUrl" class="col-sm-2 control-label">副图</label>
                                        <div class="col-sm-4">
                                            <input type="hidden" id="subImgUrl" name="subImgUrl"
                                                   th:value="${star.subImgUrl}">
                                            <input type="file" style="display: none;" id="subImgUrlFile" img
                                                   name="subImgUrlFile">
                                            <img name="nail-img" th:src="${star.subImgUrl}?${star.subImgUrl}:@{/public/images/plus23.png}"
                                                 style="height: 150px; width: 150px;">
                                            <label style="color: red; margin-left: 10px">(图片尺寸建议为222*333)</label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="url" class="col-sm-2 control-label">URL地址</label>
                                        <div class="col-sm-2">
                                            <input type="text" id="url" name="url" required th:value="${star.url}"
                                                   class="form-control">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="categoryId" class="col-sm-2 control-label">类型</label>
                                        <div class="col-sm-2">
                                            <select id="categoryId" name="categoryId" class="select selectpicker"
                                                    th:value="${star.categoryId}" required>
                                                <option th:if="${not #lists.isEmpty(starCategorys)}"
                                                        th:each="m,status:${starCategorys}"
                                                        th:value="${m.id}" th:selected="${m.id == star.categoryId}">
                                                    <th:block th:text="${m.categoryName}"></th:block>
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="container" class="col-sm-2 control-label">描述</label>
                                        <div class="col-sm-8">
                                            <script id="container" name="container" type="text/plain"></script>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-3">
                                            <button type="button" class="btn btn-info" id="btn-submit">
                                                <span class="fa fa-adjust"> 提交</span>
                                            </button>
                                            <button type="button" class="btn btn-info"
                                                    onclick="document.location.replace(ctx + '/star/manager');">
                                                <span class="glyphicon glyphicon-backward"> 返回</span>
                                            </button>
                                       </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <textarea id="descrption" th:text="${star.descrption}" style="display: none;">

    </textarea>
</body>

<th:block th:include="commons/js::js">Javascript Libs</th:block>
<script type="text/javascript" th:src="@{/public/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" th:src="@{/public/ueditor/ueditor.all.min.js}"></script>
<script type="text/javascript" th:src="@{/public/ueditor/ueditorinit.js}"></script>
<script type="text/javascript">

    $(function () {
        ue.addListener("ready", function () {
            ue.setContent("");
            ue.setContent($("#descrption").val());
        });

        $("#btn-submit").click(function () {
            if (!ue.hasContents()) {
                Alert("请填入描述信息");
                return;
            }
            // 提交表单
            var actionForm = $("#actionForm");
            var valid = actionForm.valid();
            if (!valid) {
                return;
            }
            var mainImgUrlFile = $("#mainImgUrlFile")[0].files.length;
            var mainImgUrl = $("#mainImgUrl").val();
            if (mainImgUrlFile < 1 && $.trim(mainImgUrl).length < 1) {
                Alert("请选择文件");
                return;
            }
            var subImgUrlFile = $("#subImgUrlFile")[0].files.length;
            var subImgUrl = $("#subImgUrl").val();
            if (subImgUrlFile < 1 && $.trim(subImgUrl).length < 1) {
                Alert("请选择文件");
                return;
            }
            actionForm.ajaxSubmit({
                type: "post",
                url: ctx + "/star/saveStar",
                data: {
                    descrption: ue.getContent()
                },
                success: function (rtn) {
                    if (rtn.code != 1) {
                        Alert(rtn.message);
                        return;
                    }
                    Alert("操作成功", function () {
                        document.location.replace(ctx + "/star/manager");
                    });
                }
            });

        });
    });
</script>
</html>